<template>
    <div class="range-input-page">
        <n-input-number
            v-model:value="min"
            controls-position="right"
            :min="0"
            size="small"
            style="width: 80px"
            :show-button="false"
        />
        <span class="line">-</span>
        <n-input-number
            v-model:value="max"
            controls-position="right"
            :min="0"
            :max="10000"
            size="small"
            style="width: 80px"
            :show-button="false"
        />
        <n-button class="btn" size="small" type="primary" @click="onConfirm"
            >确定</n-button
        >
    </div>
</template>
<script setup>
import { ref, toRefs } from "vue";

const props = defineProps({
    unit: {
        type: String,
        default: () => "",
    },
});

const emits = defineEmits(["confirm"]);
const { unit } = toRefs(props);

const min = ref(0);
const max = ref(0);

const confirm = () => {
    if (min.value && max.value && min.value > max.value) {
        min.value = max.value;
        max.value = min.value;
    }
    if (!min.value && !max.value) return;
    let str = "";
    if (min.value === 0 && max.value) str = `${max.value}${unit.value}以下`;
    if (min.value && !max.value) str = `${min.value}${unit.value}以上`;
    if (min.value && max.value)
        str = `${
            min.value > max.value
                ? max.value + "-" + min.value
                : min.value + "-" + max.value
        }${unit.value}`;
    emits("confirm", str);
};
</script>
<style lang="less" scoped>
.range-input-page {
    display: flex;
    align-items: center;
    span.line {
        margin: 0 5px;
    }
    .btn {
        margin-left: 5px;
    }
}
</style>
